<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色追踪 - Web 视觉检测系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <div class="container">
        <header>
            <h1>🎨 颜色追踪</h1>
            <p>基于 HSV 色彩空间的物体追踪</p>
        </header>

        <div class="detection-container">
            <div class="detection-header">
                <h2>实时追踪</h2>
                <a href="/" class="btn btn-secondary">← 返回主页</a>
            </div>

            <div class="info-box">
                <p><strong>功能说明：</strong></p>
                <p>• 追踪特定颜色的物体并标记中心位置</p>
                <p>• 左侧显示原始图像，右侧显示颜色遮罩</p>
                <p>• 绿色轮廓框显示追踪的物体，红点标记中心</p>
                <p>• 可以通过下方预设快速切换追踪颜色</p>
            </div>

            <div class="video-container">
                <img src="{{ url_for('video_feed', detection_type='color_tracking') }}" alt="视频流" class="video-stream"
                    onerror="this.src=''; this.alt='❌ 无法加载视频流';">
                <div class="video-loading">
                    <div class="spinner"></div>
                    <p>正在加载视频流...</p>
                </div>
            </div>

            <div class="controls">
                <h3>颜色预设</h3>
                <p style="margin-bottom: 10px;">点击下方按钮快速切换追踪颜色：</p>
                <div class="color-presets">
                    <button class="color-preset btn-primary" onclick="setColorRange([50, 80, 80], [120, 255, 255])">
                        🟢 绿色
                    </button>
                    <button class="color-preset" onclick="setColorRange([0, 100, 100], [10, 255, 255])">
                        🔴 红色
                    </button>
                    <button class="color-preset" onclick="setColorRange([100, 100, 100], [130, 255, 255])">
                        🔵 蓝色
                    </button>
                    <button class="color-preset" onclick="setColorRange([20, 100, 100], [30, 255, 255])">
                        🟡 黄色
                    </button>
                    <button class="color-preset" onclick="setColorRange([140, 50, 50], [170, 255, 255])">
                        🟣 紫色
                    </button>
                    <button class="color-preset" onclick="setColorRange([10, 100, 100], [20, 255, 255])">
                        🟠 橙色
                    </button>
                </div>

                <div style="margin-top: 20px;">
                    <h3>自定义 HSV 范围</h3>
                    <div class="control-group">
                        <label>H 最小值 (色调)：<span id="h-min-val">50</span></label>
                        <input type="range" id="h-min" min="0" max="179" value="50" oninput="updateHSV()">
                    </div>
                    <div class="control-group">
                        <label>H 最大值 (色调)：<span id="h-max-val">120</span></label>
                        <input type="range" id="h-max" min="0" max="179" value="120" oninput="updateHSV()">
                    </div>
                    <div class="control-group">
                        <label>S 最小值 (饱和度)：<span id="s-min-val">80</span></label>
                        <input type="range" id="s-min" min="0" max="255" value="80" oninput="updateHSV()">
                    </div>
                    <div class="control-group">
                        <label>S 最大值 (饱和度)：<span id="s-max-val">255</span></label>
                        <input type="range" id="s-max" min="0" max="255" value="255" oninput="updateHSV()">
                    </div>
                    <div class="control-group">
                        <label>V 最小值 (明度)：<span id="v-min-val">80</span></label>
                        <input type="range" id="v-min" min="0" max="255" value="80" oninput="updateHSV()">
                    </div>
                    <div class="control-group">
                        <label>V 最大值 (明度)：<span id="v-max-val">255</span></label>
                        <input type="range" id="v-max" min="0" max="255" value="255" oninput="updateHSV()">
                    </div>
                    <button class="btn btn-primary" onclick="applyCustomHSV()">应用自定义设置</button>
                </div>

                <div style="margin-top: 20px;">
                    <h3>技术信息</h3>
                    <p>🔍 <strong>追踪算法：</strong>HSV 色彩空间 + 轮廓检测</p>
                    <p>📊 <strong>最小面积：</strong>100 像素（过滤噪声）</p>
                    <p>🎨 <strong>色彩空间：</strong>H: 0-179, S: 0-255, V: 0-255</p>
                    <p>💡 <strong>提示：</strong>均匀光照条件下追踪效果最佳</p>
                </div>
            </div>
        </div>

        <footer>
            <p>Web 视觉检测系统 | 颜色追踪模块</p>
        </footer>
    </div>

    <script>
        document.querySelector('.video-stream').onload = function () {
            const loading = document.querySelector('.video-loading');
            if (loading) {
                loading.style.display = 'none';
            }
        };

        function setColorRange(hsvMin, hsvMax) {
            fetch('/api/update_color_range', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    hsv_min: hsvMin,
                    hsv_max: hsvMax
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        // 更新滑块值
                        document.getElementById('h-min').value = hsvMin[0];
                        document.getElementById('h-max').value = hsvMax[0];
                        document.getElementById('s-min').value = hsvMin[1];
                        document.getElementById('s-max').value = hsvMax[1];
                        document.getElementById('v-min').value = hsvMin[2];
                        document.getElementById('v-max').value = hsvMax[2];
                        updateHSV();
                    }
                })
                .catch(error => console.error('Error:', error));
        }

        function updateHSV() {
            document.getElementById('h-min-val').textContent = document.getElementById('h-min').value;
            document.getElementById('h-max-val').textContent = document.getElementById('h-max').value;
            document.getElementById('s-min-val').textContent = document.getElementById('s-min').value;
            document.getElementById('s-max-val').textContent = document.getElementById('s-max').value;
            document.getElementById('v-min-val').textContent = document.getElementById('v-min').value;
            document.getElementById('v-max-val').textContent = document.getElementById('v-max').value;
        }

        function applyCustomHSV() {
            const hsvMin = [
                parseInt(document.getElementById('h-min').value),
                parseInt(document.getElementById('s-min').value),
                parseInt(document.getElementById('v-min').value)
            ];
            const hsvMax = [
                parseInt(document.getElementById('h-max').value),
                parseInt(document.getElementById('s-max').value),
                parseInt(document.getElementById('v-max').value)
            ];
            setColorRange(hsvMin, hsvMax);
        }
    </script>
</body>

</html>